<template>
  <div class="switch-wrap">
    <button
      :class="[on? 'active':'',disable? 'disable':'',size]"
      @click="onToggle"
      :disabled="disable"
    >

      <span class="ball"></span>
    </button>
  </div>
</template>

<script lang='ts'>
import { ref } from "vue";
export default {
  name: "Switch",
  props: {
    disable: {
      default: false,
      type: Boolean,
    },
    size: {
      default: "medium",
      type: String,
    },
  },
  setup() {
    const on = ref(false);
    const onToggle = () => {
      on.value = !on.value;
    };
    return {
      on,
      onToggle,
    };
  },
};
</script>
<style lang="scss" scoped>
$mediumSize: 26px;
$largeSize: 32px;
$smallSize: 20px;

// 颜色控制
$bgColor: "#1cbbb4";

@mixin btnStyle {
  //默认按钮样式
  position: relative;
  outline: none;
  box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f0f0f0;
  // cursor: pointer;
  background-color: #1890ff;
  // background-color: inherit;
  border: none;
}
@mixin ballStyle {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translate(0, -50%);
  border-radius: 100%;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
  vertical-align: middle;
  box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-wrap {
  > .large {
    //大尺寸
    width: $largeSize * 2;
    height: $largeSize;
    border-radius: $largeSize / 2;
    @include btnStyle;

    > .ball {
      width: $largeSize - 5px;
      height: $largeSize - 5px;
      @include ballStyle;
    }
    &.active {
      background-color: #dcdfe6;
    }
    &.active .ball {
      left: calc(100% - #{$largeSize});
    }
  }

  > .small {
    //小尺寸
    width: $smallSize * 2;
    height: $smallSize;
    border-radius: $smallSize / 2;
    @include btnStyle;

    > .ball {
      width: $smallSize - 5px;
      height: $smallSize - 5px;
      @include ballStyle;
    }
    &.active {
      background-color: #dcdfe6;
    }
    &.active .ball {
      left: calc(100% - #{$smallSize});
    }
  }

  > .medium {
    //中等尺寸
    width: $mediumSize * 2;
    height: $mediumSize;
    border-radius: $mediumSize / 2;
    @include btnStyle;

    > .ball {
      width: $mediumSize - 5px;
      height: $mediumSize - 5px;
      @include ballStyle;
    }
    &.active {
      background-color: #dcdfe6;
    }
    &.active .ball {
      left: calc(100% - #{$mediumSize});
    }
  }

  > button {
    text-align: left;
    cursor: pointer;
    // color: rgba(0, 0, 0, 0.65);
    color: rgba(0,0,0,.25);
    background: $bgColor;
  }
  > .disable {
    //禁用
    cursor: not-allowed;
    opacity: 0.4;
    // pointer-events: none;
  }

  &.active {
    background-color: #dcdfe6;
  }
}
</style>
